<template>
  <div class="upload-list-progress flex" :style="[boxStyle]">
    <Progress :percent="percent" status="active" style="width: 100%"
              :stroke-width="15"></Progress>
  </div>
</template>

<script>
  export default {
    name: "cus-progress",
    data() {
      return {
        show: false,
        timer: null,
        percent: 0,
      }
    },
    props: {
      status: {
        type: String,
        default: 'active'
      },
      width: {
        type: String,
        default: ''
      }
    },
    computed: {
      boxStyle() {
        let style = {};
        style.zIndex = this.show ? 1 : -1;
        style.width = this.width;
        return style;
      }
    },
    watch: {
      status(newV) {
        if (newV === 'success') {
          this.finished();
        } else if (newV === 'wrong') {
          this.finished();
        }
      }
    },
    mounted() {
      if (this.status == 'active') {
        this.show = true;
        this.loading();
      }
    },
    methods: {
      loading() {
        this.timer = setInterval(() => {
          if (this.percent > 90) {
            clearInterval(this.timer);
          }
          this.percent += Math.floor(Math.random() * 3 + 1);
        }, 200);
      },
      finished() {
        clearInterval(this.timer);
        this.percent = 100;

        setTimeout(() => {
          this.show = false;
        }, 1000);
      }
    },
    beforeDestroy() {
      this.finished();
    }
  }
</script>

<style scoped lang="less">
  .upload-list-progress {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
  }
</style>
